<template>
	<view class="content">
        <uv-navbar title="none" leftIconColor="#fff" autoBack
            :titleStyle="'color:#fff;font-size: 0;font-weight:bold'" bgColor="rgba(255,255,255,0)"></uv-navbar>
       <swiper v-if="userInfo.images.length" class="swiper" circular indicator-active-color="#277CC0" :indicator-dots="indicatorDots"
            :autoplay="autoplay" :interval="interval" :duration="duration">
            <swiper-item v-for="(i,n) in userInfo.images" :key="n">
               <image :src="i" mode=""></image>
            </swiper-item>
        </swiper>
      
        <view class="plr16 bgWhite pb15 radius15 pt22" style="margin-top: -20rpx;position: relative;border-radius: 30rpx 30rpx 0 0;">
            <view class="justify-start align-center " >
                <text style="font-weight: 800;font-size: 36rpx;color: #333;">{{userInfo.title}}</text>    
            </view>
         
           
           
           <view class="mt10" style="color: #9F9F9F;">
              类型： {{userInfo.cate_arr}}
           </view>
		   <view class="mt10" style="color: #9F9F9F;">
		      品牌： {{userInfo.goods_brand}}
		   </view>
		   <view class="justify-between align-center mt10">
		   <view class="align-end dataPrice  ">
		   			￥{{userInfo.price}} <text class="linePirce">￥{{userInfo.original_price}}</text>
		   </view>
		   <view class="ft12" style="color:#9a9a9a">
		   	已售：{{userInfo.sales}}台
		   </view>
		   </view>
            
           
        </view>
         <view class="plr16 bgWhite mtb10  pt22 pb15">
            <view class="moduleTitle ft16 ">所属商家    </view>
            <view class="align-start mt15 justify-start  " @click="toMall()">
                <image src="../../static/images/middle/address.png" style="width: 30rpx;" mode="widthFix"></image>  
                <view class="flex1 mr25" style="margin-left: 13rpx;">
                    <text class="bold ft13 gray3 " >{{shopDetail.name}}</text>
                    <view class="clamp2 ft11 color8   mt5 ">
                        {{shopDetail.address}}
                    </view>
                    
                </view>
                <image style="width: 180rpx;height: 118rpx;border-radius: 6rpx;" :src="userInfo.mall.logo_image" mode=""></image>
                
            </view>
         </view>
         <view class="bgWhite plr16 " style="padding-top: 1rpx;">
             <view class="moduleTitle ft16 ">基础信息    </view>
             <view class="">
             			<uv-parse :content="userInfo.content"></uv-parse>
             
             </view>
         </view>
        
        <view class="" style="height:126rpx">
        	
        </view>
        <view class=" bgWhite paybtn">
            <view class="justify-between align-center">
                <view class="align-center justify-between flex1">
                   <view class="flex-col align-center" @click="$utils.toHome()">
                       <image src="../../static/images/index/tabBar1.png" mode="widthFix"></image>
                       首页
                   </view>
                   <button style="line-height: 1.2; font-size: 24rpx;" open-type="contact" @contact="contact" class="flex-col align-center">
                       <image src="../../static/images/middle/chat.png" mode="widthFix"></image>
                       客服
                   </button>
                </view>
                    
                    <view class="payright align-center">
                            <view @click="pay" class="">加入购物车</view>
                            <view @click="pay" class="onlinePay">立即下单</view>
                    </view>
            </view>
        </view>
        <uv-popup ref="cartpopup" mode="bottom" round="16">
            <view class="flex-col align-center plr13 pt22 ">
               <view class="justify-between align-center pb15" style="width: 100%; border-bottom: 1px solid #F3F3F3">
                   <view class="" style="font-weight: bold;font-size: 34rpx;color: #333333;">
                       购物车
                   </view>
                  
               </view>
               <view class="" style="width: 100%;    max-height: 600rpx;overflow: scroll;">
                    <view v-for="(i,n) in chosedArr" :key="n" class="cartItem  justify-between"  >
                        <image :src="i.image" mode=""></image>
                        <view class="flex1 flex-col justify-between" style="border-bottom: 1px solid #F3F3F3;padding-bottom: 32rpx;">
                            <view class="item-title">
                                {{i.title}}
                            </view>
                            <view class="mt5 mb5 ft12">
                                {{i.goods_num}}台
                            </view>
                            <view class="item-content justify-between align-center">
                                <text style="color:#FF4345 ;">￥{{i.price}}</text>
                               <!-- <view class="choseRule">
                                    选规格
                                </view> -->
                                <view class="align-center">
                                    <uv-icon color="#FF4345"   @click="delCart(i)" size="24" name="minus-circle"> </uv-icon> <text
                                        class="mlr10">{{i.goods_num||1}}</text> <uv-icon @click="addCart(i)" size="24" color="#FF4345"
                                        name="plus-circle-fill"> </uv-icon>
                                </view>
                            </view>
                        </view>
                    </view>
               </view>
            
               <view class="addCart" @click="subOrder">
                   下单
               </view>
              
            </view>
        </uv-popup>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
                
				list: [],
				chain: false,
				value: 0,
                indicatorDots: true,
                autoplay: true,
                interval: 3000,
                duration: 500,
                imgList:[],
                id:"",
                detail:{},
                page:1,
                shopDetail:{},
				userInfo:{
                    images:[]
                },
                chosedArr:[]
				
				
			}
		},
		
		onLoad(opt) {
                if(opt.id) this.id = opt.id
                // this.getUserInfo()
                
                this.getMain()
                // this.getGoodsCart()
                
		},
		methods: {
            async getGoodsCart(){
             let  data=await this.$api.getMallCart({mall_id:this.userInfo.mall_id,page:this.page})
             console.log(data)
             this.chosedArr=data.list
            },
            close(){
              this.$refs.cartpopup.close()  
            },
            async pay(){
                
                this.addCart()
            },
			async getUserInfo(){
				const {data} =  await this.$api.userinfo({user_id:this.user_id})
				
				
			},
			async getMain() {
                let  data =   await this.$api.mallDetail({id:this.id })
               console.log(data)
               this.userInfo = data.detail
               this.getDetail()
			},
            async getDetail(){
             let  data=await this.$api.mallInfo({mall_id:this.userInfo.mall_id})  
             console.log(data)
             this.shopDetail= data.info
            },
            async addStar(){
                let  data=await this.$api.getShopAssistantLike({id:this.id})
                console.log(data)
                
                    
            },
			
			
            async subOrder(){
                const data =await this.$api.createMallOrder()
                if(data.code==1){
                    uni.showToast({
                        title:"下单成功"
                    })
                    setTimeout(()=>{
                        uni.navigateTo({
                            url:'/pages/order/index'
                        })
                    },1000)
                }
                console.log(data)
            },
            async getGoodsCart(){
             let data = await  this.$api.getMallCart({mall_id:this.userInfo.mall_id,page:this.page})
             console.log(data)
             this.chosedArr=data.list
             this.$refs.cartpopup.open()  
            },
			addCart(item){
			    if(this.loading) return
			    this.loading=true
			    this.$api.mallGoodsAdd({goods_id:item?.goods_id||this.id}).then(res=>{
			        console.log(res)
			        this.loading=false
			        this.getGoodsCart()
			    }) 
			},
			delCart(item){
			    if(this.loading) return
			    this.loading=true
			    let num = item.goods_num
			    if(num>1){
			        num--
			         this.$api. mallGoodsEdit({goods_id:item.goods_id,goods_num:num}).then(res=>{
			             console.log(res)
			             this.loading=false
			             this.getGoodsCart()
			         })
			    }else{
			        this.$api.mallGoodsDel({goods_id:item.goods_id}).then(res=>{
			            console.log(res)
			            this.loading=false
			            this.getGoodsCart()
			        })
			        this.loading=false
			    }
			   
			},
            toMall(){
                uni.navigateTo({
                    url:'/pages/mall/index?id='+this.userInfo.mall_id
                })
            }
		}
	}
</script>
<style scoped lang="scss">
	.header {
		padding: 30rpx;
		font-size: 30rpx;
		color: #333;
	}
	
    .notice{
        padding: 26rpx 48rpx;
        background: #FCF3EE;
        border: 2rpx solid #F3D6C6;
        font-size: 28rpx;
        color: #F3915B;
        image{
            margin-left: 86rpx;
            width: 60rpx;
        }
    }
    .paybtn{
        box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(29,29,38,0.09);
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 20rpx 30rpx;
        background-color: #fff;
        font-weight: 500;
        font-size: 24rpx;
        color: #222222;
        .payright{
            margin-left: 40rpx;
            view{
                width: 233rpx;
                height: 84rpx;
                border-radius: 50rpx 0 0 50rpx;
                color: #fff;
                line-height: 84rpx;
                font-size: 30rpx;
                text-align: center;
                font-weight: bold;
                background-color: #343434;
            }
            .onlinePay{
              border-radius: 0 50rpx  50rpx 0;
                
                
                
                
                
                
                background: #01C588;
                color: #fff;
                
            }
        }
        
        image{
            width: 44rpx;
        }
     
      
    }
    .moduleTitle{
        font-weight: bold;
        color: #000000;
        
        margin: 30rpx 0 25rpx;
    }
        
    .swiper{
        height: 724rpx;
        image{
            width: 100%;
            height: 724rpx;
        }
    }
        
    .userTag{
        text{
            min-width: 140rpx;
            display: inline-block;
            height: 57rpx;
            background: #F5F5F5;
            line-height: 57rpx;
            border-radius: 8rpx;
            margin-right: 16rpx;
            font-weight: 400;
            font-size: 26rpx;
            text-align: center;
            color: #333333;
        }
       
    }
    .ellipsis{
            text{
                min-width: 140rpx;
                display: inline-block;
                height: 57rpx;
                background: rgba(44,179,123,0.1);
                line-height: 57rpx;
                border-radius: 8rpx;
                margin-right: 16rpx;
                font-weight: 400;
                font-size: 26rpx;
                text-align: center;
                color: #01C588;
            }
                   
    }
    .popcontent{
        height: 521rpx;
        align-items: center;
    }
    .poprule{
        width: 574rpx;
        height: 226rpx;
        background: #F5F5F5;
        border-radius: 10rpx;
        font-size: 26rpx;
        color: #333333;
        line-height: 53rpx;
        margin-bottom: 40rpx;
        text-align: center;
    }
    .buybtn{
        padding: 0;
        width: 574rpx;
        view{
            width: 280rpx;
            height: 64rpx;
            line-height: 64rpx;
            font-size: 30rpx;
            color: #2CB37B;
            border-radius: 32rpx;
            border: 4rpx solid #2CB37B;
            text-align: center;
        }
        .buy{
            color: #fff;
            background-color: #2CB37B;
            
            
        }
    }
	.dataPrice{
		font-weight: 500;
		font-size: 38rpx;
		color: #FF4345;
		.linePirce{
			font-weight: 400;
			font-size: 24rpx;
			color: #A9A9A9;
			text-decoration: line-through;
			margin-left: 10rpx;
		}
	}
    .cart {
        width: 700rpx;
        height: 104rpx;
        background: #232426;
        position: fixed;
        left: 0;
        right: 0;
        margin: auto;
        bottom: 18rpx;
        border-radius: 50rpx;
        z-index: 999999999;
        image {
            width: 72rpx;
        }
    
        .cartBox {
            position: relative;
            width: 72rpx;
            height: 72rpx;
            margin-left: 54rpx;
    
            .cartNum {
                display: inline-block;
                width: 34rpx;
                height: 34rpx;
                position: absolute;
                top: 0;
                right: -20rpx;
                background: #FF4345;
                color: #fff;
                text-align: center;
                border-radius: 50%;
                font-size: 28rpx;
            }
        }
    
        .buybtn {
            width: 214rpx;
            border-radius: 0 50rpx 50rpx 0;
            font-weight: bold;
            font-size: 32rpx;
            color: #FFFFFF;
            text-align: center;
            background-color: #00C584;
            line-height: 104rpx;
        }
    }
    
       .addCart{
           width: 100%;
           margin-top: 40rpx;
           height: 85rpx;
           background:#FF4345;
           font-weight: bold;
           font-size: 30rpx;
           color: #FFFFFF;
           text-align: center;
           line-height: 85rpx;
           border-radius: 40rpx;
       }
    .cartItem{
        width: 100%;
        margin-top: 16rpx;
        image{
            width: 126rpx;
            height: 128rpx;
            margin-right: 23rpx;
            border-radius: 16rpx;
        }
    }
</style>